<template>
  <Transfer
      :data="data"
      :target-keys="targetKeys"
      :list-style="listStyle"
      :titles="['未分配系统', '已分配系统']"
      filterable
      :filter-method="filterMethod"
      @on-change="handleChange"></Transfer>
</template>
<script>
export default {
  props: {
     menuId: {
       type: Number ,
       required: true
     }
  },
  data () {
    return {
      data: [],
      targetKeys: [],
      listStyle: {
        height: '500px',
      }
    }
  },
  created() {
     this.querySysList();
  },
  methods: {
    querySysList() {
       this.$api.queryMenuBindSysList(this.menuId).then(ret=> {
          if (ret.data.status) {
            let list = ret.data.list ;
            this.data = list.map(d => ({ key: d.id , label: d.sysName, disabled: !d.state}))
            this.targetKeys = list.filter(d => d.bind).map(d => d.id);
          }
       })
    },
    handleChange (newTargetKeys) {
      this.targetKeys = newTargetKeys;
    },
    filterMethod (data, query) {
      return data.label.indexOf(query) > -1;
    }
  }
}
</script>

<style>
.ivu-transfer {
  text-align: center;
}
.ivu-transfer-list-footer {
  border: none;
}

.ivu-transfer-list-content {
  text-align: left;
}
</style>
